<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>好友管理</title>
		<script src="../static/babel/6.26.0/polyfill.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/axios/0.17.1/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/vue/2.5.13/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/element-ui/2.1.0/index.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../static/element-ui/2.1.0/index.css" />
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/hou-tai.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/hou-tai.css" />
	</head>

	<body>
		<div id="app">
			<hou-tai>
				<div style="width: 100%; margin: auto;">
					<el-tabs value="friend">
						<el-tab-pane label="我的好友" name="friend">
							<el-row type="flex" justify="space-around" align="middle">
								<el-col align="right">
									<el-button type="success" icon="el-icon-plus" @click="dialogAddFriendVisible = true">新增好友</el-button>
								</el-col>
							</el-row>
							<br />
							<el-row type="flex" justify="space-around" align="middle">
								<el-col :span="6">
									我的好友
									<el-card class="list">
										<div v-for="friend in myFriend" v-if="friend.state == 1" class="item">
											{{friend.friendNickname}}
											<el-button size="mini" type="danger" icon="el-icon-delete" round @click="deleteFriend(friend)"></el-button>
											<el-button size="mini" type="danger" icon="el-icon-circle-close-outline" round @click="addBlacklist(friend)"></el-button>
										</div>
									</el-card>
								</el-col>
								<el-col :span="6">
									我的关注
									<el-card class="list">
										<div v-for="friend in myFriend" v-if="friend.state == 0" class="item">
											{{friend.friendNickname}}
											<el-button size="mini" type="danger" icon="el-icon-delete" round @click="cancelAdd(friend)"></el-button>
											<el-button size="mini" type="danger" icon="el-icon-circle-close-outline" round @click="addBlacklist(friend)"></el-button>
										</div>
									</el-card>
								</el-col>
								<el-col :span="6">
									黑名单
									<el-card class="list">
										<div v-for="friend in myFriend" v-if="friend.state == 2" class="item">
											{{friend.friendNickname}}
											<el-button size="mini" type="primary" icon="el-icon-delete" round @click="removeBlacklist(friend)"></el-button>
										</div>
									</el-card>
								</el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane label="申请列表" name="addMe">
							<br /><br /><br />
							<el-row type="flex" justify="space-around" align="middle">
								<el-col :span="6">
									<el-card class="list">
										<div v-for="friend in friendAddMe" class="item">
											{{friend.userNickname}}
											<el-button size="mini" type="primary" icon="el-icon-circle-plus" round @click="accept(friend)"></el-button>
										</div>
									</el-card>
								</el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane label="我的群组" name="group">
							<el-row type="flex" justify="space-around" align="middle">
								<el-col align="right">
									<el-button type="success" icon="el-icon-plus" @click="dialogCreateGroupVisible = true">新建群组</el-button>
								</el-col>
							</el-row>
							<br />
							<el-row type="flex" justify="space-around" align="middle">
								<el-col :span="6">
									<el-card class="list">
										<div v-for="group in myGroup" class="item">
											{{group.groupName}}
											<el-button size="mini" type="danger" icon="el-icon-delete" round @click="deleteGroup(group)"></el-button>
											<el-button size="mini" type="success" icon="el-icon-plus" round @click="selectAddGroup(group)"></el-button>
										</div>
									</el-card>
								</el-col>
							</el-row>
						</el-tab-pane>
					</el-tabs>
					<el-dialog title="添加好友" :visible.sync="dialogAddFriendVisible" width="400px" @keyup.enter.native="findAndAdd">
						<el-row type="flex">
							<el-col>
								<el-input v-model="friendUsername" placeholder="请输入用户名"></el-input>
							</el-col>
							<el-col align="right">
								<el-button type="primary" @click="findAndAdd">添加好友</el-button>
							</el-col>
						</el-row>
					</el-dialog>
					<el-dialog title="新建群组" :visible.sync="dialogCreateGroupVisible" width="400px" @keyup.enter.native="createGroup">
						<el-row type="flex">
							<el-col>
								<el-input v-model="createGroupName" placeholder="请输入群名称"></el-input>
							</el-col>
							<el-col align="right">
								<el-button type="primary" @click="createGroup">新建</el-button>
							</el-col>
						</el-row>
					</el-dialog>
					<el-dialog title="选择联系人" :visible.sync="dialogAddGroupVisible" width="1000px">
						<el-row type="flex" justify="space-around" align="middle">
							<el-col :span="6">
								<el-card class="list">
									<div v-for="friend in myFriend" v-if="friend.state == 1" class="item">
										{{friend.friendNickname}}
										<el-button size="mini" type="success" icon="el-icon-plus" round @click="addGroupUser(friend)"></el-button>
									</div>
								</el-card>
							</el-col>
							<el-col :span="6">
								<el-card class="list">
									<div v-for="group in groupMember" class="item">
										{{group.userNickname}}
									</div>
								</el-card>
							</el-col>
						</el-row>
					</el-dialog>
				</div>
			</hou-tai>
		</div>
		<script src="js/friend.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/friend.css" />
	</body>

</html>